<template>
  <!--领取优惠券弹框-->
  <x-modal
    v-if="allCouponSend"
    :visible.sync="show"
    width="750"
    padding="0"
    background="transparent"
  >
    <view class="p-coupon-drawer">
      <x-send-coupon :coupon="allCouponSend" @sendcoupon="onCustomEvent">
        <view class="_send-coupon">
          <view class="_send">
            <view class="_pic">
              <x-image :src="imageUrl" mode="widthFix" />
            </view>

            <view v-if="directReductionAmount" class="content">
              <view class="value">{{ directReductionAmount }}</view>
              <view class="unit">元</view>
            </view>
          </view>

          <view v-if="popupStatus" class="_close_send_coupon">
            <x-icon name="icon-003" size="40" color="#fff"/>
          </view>
        </view>
      </x-send-coupon>
      <view v-if="!popupStatus" class="_close_send_coupon" @click="onCloseCoupon">
        <x-icon name="icon-003" size="40" color="#fff"/>
      </view>
    </view>
  </x-modal>
</template>

<script>
import { mapState } from 'vuex';

import XSendCoupon from '@/components/x-send-coupon';
import XModal from '@/components/x-modal';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'PCouponDrawer',
  components: {
    XSendCoupon,
    XModal,
    XIcon,
    XImage
  },
  props: {
    allCouponSend: {
      type: Object,
      default: () => {}
    },
    couponStyleImageUrl: {
      type: String,
      default: ''
    },
    query: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: true
    };
  },
  computed: {
    ...mapState({
      // 一键开启/关闭视频号场景挽留弹框
      popupStatus: state => state['pages'].popupStatus,
      // 页面价格
      pagePrice: state => state['product'].pageDetail.pagePrice,
      // 页面单买价
      pageHighPrice: state => state['product'].pageDetail.pageHighPrice
    }),
    imageUrl() {
      return this.directReductionAmount ? '/assets/images/popup-coupon.png' : 'https://alicdn.itaored.com/static/fed/wxapp/assets/images/coupon-1121.gif';
    },
    // 直降金额
    directReductionAmount() {
      return this.$tools.formatNumber(this.pageHighPrice - this.pagePrice) || 0;
    }
  },
  created() {},
  methods: {
    // 领取优惠券并下单
    onCustomEvent(res) {
      this.$emit('onSendCoupon', res);
    },
    // 关闭领券弹框
    onCloseCoupon() {
      this.$emit('onCloseCoupon');
    }
  }
};
</script>

<style lang="scss">
.p-coupon-drawer {
  ._send-coupon{ background-color: transparent; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center;}
  ._send{
    position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 690px; max-height: 1100px; display: flex; flex-direction: column; justify-content: center;
    .content{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -70%);
      font-size: 150px;
      display: flex;
      align-items: baseline;
      color: #ED323A;
      .value{
        font-weight: 600;
      }
      .unit{
        font-size: 34px;
      }
    }
    ._close{ display: flex; justify-content: center; padding: 20px;}
  }
  ._close_send_coupon{ position: absolute; right: 10%; top: 20%; transform: translate3d(-50%, 0, 0);}
}
</style>
